<template>
  <scroll-view scroll-y @scrolltolower="getHotSkuList" class="container">
    <!-- 顶部导航栏 -->
    <tm-navbar title="哈哈优选" :hideHome="true" color="orange" linear="right">
      <!-- 定义左侧插槽 -->
      <template v-slot:left>
        <!-- 左侧插槽内容 -->
        <tm-sheet color="#ff4a00" :margin="[20, 10]" :padding="[5, 15]" :round="20">
          <view class="flex flex-row" @click="redirect">
            <tm-icon :fontSize="20" color="white" name="tmicon-position-fill"></tm-icon>
            <tm-text :font-size="20" color="white" class="ml-5 mr-5">{{ address }}</tm-text>
            <tm-icon :fontSize="20" color="white" name="tmicon-arrow-right"></tm-icon>
          </view>
        </tm-sheet>
      </template>
    </tm-navbar>
    <!-- 搜索栏 -->
    <tm-sheet color="orange" :margin="[0, 0]" :padding="[20, 20]" linear="right">
      <tm-input prefix="tmicon-search" searchLabel="搜索" prefixColor="green" class="gui-search" v-model="searchText"
        @search="Search"></tm-input>
    </tm-sheet>
    <!-- 新人专享商品列表 -->
    <tm-sheet :margin="[0, 0]" :padding="[0, 0]" class="newPerson">
      <!-- 新人专享标题 -->
      <text>新人专享低价好物</text>
      <!-- 商品滚动列表 -->
      <scroll-view scroll-x enable-flex class="newPerson-list">
        <!-- 商品项 -->
        <tm-sheet :margin="[0, 0]" v-for="item in newPersonSkuInfoList.filter((ele) => ele.isNewPerson === 1)"
          :key="item._id" _class="flex-center">
          <view class="flex flex-col flex-col-center-center">
            <!-- 商品图片 -->
            <tm-image :width="250" :height="200" :src="item.imgUrl" @click="GoHomeItem(item)"></tm-image>
            <!-- 商品价格 -->
            <tm-sheet :margin="[0, 10, 0, 0]" :padding="[0, 0]">
              <tm-text color="red" :label="`￥${item.price}`"></tm-text>
            </tm-sheet>
          </view>
          <!-- 添加购物车按钮 -->
          <AddToCart :skuId="item._id" :perLimit="item.perLimit"></AddToCart>
        </tm-sheet>
      </scroll-view>
    </tm-sheet>
    <!-- 滚动通知栏 -->
    <tm-roll-notice color="#abff66" :font-size="24" list="平台资质、法律条款、规则及投诉入口" @click="openRule"></tm-roll-notice>
    <!-- 抽屉组件，用于显示规则详情 -->
    <tm-drawer ref="calendarView" placement="bottom" v-model:show="showRule" :hideCancel="true" :height="750">
      <!-- 规则详情内容 -->
      <!-- 品质保障 -->
      <tm-sheet :margin="[0, 0]" :padding="[20, 20]">
        <tm-sheet :margin="[0, 0]" :padding="[0, 0]" _class="flex flex-row">
          <tm-icon :fontSize="40" color="red" name="tmicon-check-circle-fill"></tm-icon>
          <tm-text _class="ml-20 text-weight-b" :font-size="30">品质保障</tm-text>
        </tm-sheet>
        <tm-text _class="mt-20">全场商品均经过品质检验，若收货时发现商品有变质、腐烂、损坏等情况，可申请退款</tm-text>
      </tm-sheet>
      <!-- 极速退款 -->
      <tm-sheet :margin="[0, 0]" :padding="[20, 20]">
        <tm-sheet :margin="[0, 0]" :padding="[0, 0]" _class="flex flex-row">
          <tm-icon :fontSize="40" color="red" name="tmicon-check-circle-fill"></tm-icon>
          <tm-text _class="ml-20 text-weight-b" :font-size="30">极速退款</tm-text>
        </tm-sheet>
        <tm-text _class="mt-20">根据平台规则，在一定条件下，可享受极速退款到账服务</tm-text>
      </tm-sheet>
      <!-- 资质规则 -->
      <tm-sheet :margin="[0, 0]" :padding="[20, 20]">
        <tm-sheet :margin="[0, 0]" :padding="[0, 0]" _class="flex flex-row">
          <tm-icon :fontSize="40" color="red" name="tmicon-check-circle-fill"></tm-icon>
          <tm-text _class="ml-20 text-weight-b" :font-size="30">资质规则</tm-text>
        </tm-sheet>
        <tm-text _class="mt-20">平台资质、法律条款、规则及投诉入口，点击查看详情</tm-text>
      </tm-sheet>
    </tm-drawer>
    <!-- 分类列表 -->
    <view class="categoryList">
      <!-- 水平滚动视图 -->
      <tm-scrollx :width="700" :height="300">
        <!-- 网格布局 -->
        <tm-grid :col="7" :width="1200">
          <!-- 网格项，循环生成 -->
          <tm-grid-item v-for="(item, index) in categoryList" :key="index" :height="140">
            <!-- 分类图片 -->
            <tm-image :width="100" :height="100" :round="5" :src="item.imgUrl"
              @click="gotoCategory(item, index)"></tm-image>
            <!-- 分类名称 -->
            <view style="white-space: normal">
              <tm-text _class="text-overflow-1" :font-size="24" :label="item.name"></tm-text>
            </view>
          </tm-grid-item>
        </tm-grid>
      </tm-scrollx>
    </view>
    <!-- 如果存在秒杀活动，则显示秒杀抢购模块 -->
    <block v-if="seckillTime.id">
      <!-- 秒杀抢购标题及查看全部按钮 -->
      <view class="mt-20 ml-20 mr-20 flex flex-between flex-row-center-between white">
        <view class="flex ma-10">
          <tm-text :font-size="24">秒杀抢购</tm-text>
          <!-- 显示秒杀活动时间范围 -->
          <tm-text :font-size="24">
            {{ seckillTime.name }}场 {{ seckillTime.startTime }} - {{ seckillTime.endTime }}
          </tm-text>
        </view>
        <!-- 查看全部按钮 -->
        <tm-button :margin="[10]" :shadow="0" label="查看全部" size="small" @click="gotoSeckill"></tm-button>
      </view>
      <!-- 秒杀商品列表 -->
      <scroll-view scroll-x enable-flex class="seckillSkuVoList">
        <view class="flex mr-20 mt-20">
          <view class="pr-20 flex-center flex flex-col flex-col-center-center" v-for="item in seckillSkuVoList"
            :key="item._id">
            <!-- 秒杀活动时间名称 -->
            <tm-text :font-size="24" class="mb-10">{{ item.timeName }}</tm-text>
            <!-- 秒杀商品图片 -->
            <tm-image @click="GoHomeItem(item)" :src="item.imgUrl" :round="5" :width="200" :height="200"></tm-image>
            <!-- 秒杀商品名称 -->
            <tm-text :font-size="32" class="mt-10">{{ item.skuName }}</tm-text>
            <!-- 添加购物车按钮 -->
            <AddToCart :sku-id="item.seckillSkuId" :per-limit="item.seckillLimit"></AddToCart>
          </view>
        </view>
      </scroll-view>
    </block>

    <!-- 购买步骤说明 -->
    <view class="ma-20 pt-10 pb-10 pl-10 white">
      <tm-text :font-size="32" class="mt-10 text-weight-b">如何在[哈哈优选]购买商品</tm-text>
      <view class="flex flex-row flex-row-center-start mt-10">
        <!-- 第一步 -->
        <tm-text class="orange round-10 pa-10 mr-10" color="white">1</tm-text>
        <tm-text>挑商品</tm-text>
        <!-- 箭头图标 -->
        <tm-icon :fontSize="20" color="red" name="tmicon-arrow-right"></tm-icon>
        <tm-icon :fontSize="20" color="red" name="tmicon-arrow-right"></tm-icon>
        <!-- 第二步 -->
        <tm-text class="orange round-10 pa-10 mr-10 ml-10" color="white">2</tm-text>
        <tm-text>选提货点</tm-text>
        <tm-icon :fontSize="20" color="red" name="tmicon-arrow-right"></tm-icon>
        <tm-icon :fontSize="20" color="red" name="tmicon-arrow-right"></tm-icon>
        <!-- 第三步 -->
        <tm-text class="orange round-10 pa-10 mr-10 ml-10" color="white">3</tm-text>
        <tm-text>次日16点提货点取货</tm-text>
      </view>
    </view>

    <!-- 热门商品列表 -->
    <tm-text :font-size="32" class="ml-20 text-weight-b">热销好货</tm-text>
    <view>
      <view class="ma-20 flex HotItem" v-for="item in hotSkuList.filter((ele) => ele.isNewPerson != 1).slice(0, length)"
        :key="item.id">
        <view @click="GoHomeItem(item)">
          <!-- 热门商品图片 -->
          <tm-image :src="item.imgUrl" :width="250" :height="250"></tm-image>
        </view>
        <view class="pb-20 ml-20 flex flex-col" style="width: 100vw">
          <view class="flex flex-col">
            <!-- 热门商品名称 -->
            <tm-text :font-size="32" class="text-weight-b">{{ item.skuName }}</tm-text>
            <!-- 商品销量和库存 -->
            <tm-text class="mt-10">已售 {{ item.sale }}/剩余 {{ item.stock }}</tm-text>
            <!-- 商品规则 -->
            <block v-if="item.ruleList && item.ruleList.length > 0">
              <tm-text :font-size="24" color="red" v-for="rule in item.ruleList" :key="rule">{{ rule }}</tm-text>
            </block>
          </view>
          <view class="flex flex-row flex-row-center-between">
            <view class="flex flex-row">
              <!-- 商品价格 -->
              <tm-text :font-size="36">￥ {{ item.price }}</tm-text>
            </view>
            <!-- 添加购物车按钮 -->
            <AddToCart :sku-id="item._id" :per-limit="item.perLimit"></AddToCart>
          </view>
        </view>
      </view>
      <tm-spin :load="loading"></tm-spin>
      <view class="flex flex-row flex-row-center-center">
        <tm-text v-if="last">————没有更多商品————</tm-text>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import tmButton from '@/tmui/components/tm-button/tm-button.vue'
import tmSpin from '@/tmui/components/tm-spin/tm-spin.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmIcon from '@/tmui/components/tm-icon/tm-icon.vue'
import tmInput from '@/tmui/components/tm-input/tm-input.vue'
import tmNavbar from '@/tmui/components/tm-navbar/tm-navbar.vue'
import tmImage from '@/tmui/components/tm-image/tm-image.vue'
import tmDrawer from '@/tmui/components/tm-drawer/tm-drawer.vue'
import tmScrollx from '@/tmui/components/tm-scrollx/tm-scrollx.vue'
import tmGrid from '@/tmui/components/tm-grid/tm-grid.vue'
import tmRollNotice from '@/tmui/components/tm-roll-notice/tm-roll-notice.vue'
import tmGridItem from '@/tmui/components/tm-grid-item/tm-grid-item.vue'
import { useIndexStore } from '@/store/modules/IndexStore'
import PubSub from 'pubsub-js'
import http from '@/utils/request'
import type { SeckillSkuVo, SeckillTime, HotSku, CategoryList } from '@/types'

// 使用 IndexStore 模块
const IndexStore = useIndexStore()

// 定义响应式变量
const address = ref<string>('武安市')
const searchText = ref<string>('')
const newPersonSkuInfoList = ref<HotSku[]>([])
const categoryList = ref<CategoryList[]>([])
const seckillTime = ref<SeckillTime>({})
const seckillSkuVoList = ref<SeckillSkuVo[]>([])
const hotSkuList = ref<HotSku[]>([])
const loading = ref<boolean>(false)
const length = ref<number>(4)
const last = ref<boolean>(false)

// 滚动加载数据
const getHotSkuList = () => {
  if (last.value) return
  if (loading.value) return
  loading.value = true
  setTimeout(() => {
    if (length.value >= hotSkuList.value.filter((ele) => ele.isNewPerson != 1).length) {
      last.value = true
    }
    length.value += 4
    loading.value = false
  }, 2000)
}

// 获取首页数据列表
const getList = async () => {
  await http.get('/home/index').then((res) => {
    // 更新响应式变量的值
    newPersonSkuInfoList.value = res.data.newPersonSkuInfoList
    categoryList.value = res.data.categoryList
    seckillTime.value = res.data.seckillTime
    seckillSkuVoList.value = res.data.seckillSkuVoList
    hotSkuList.value = res.data.hotSkuList

    // 更新 IndexStore 模块中的数据
    IndexStore.setSeckillSkuVoList(res.data.seckillSkuVoList)
    IndexStore.setSeckillTime(res.data.seckillTime)
    IndexStore.setHotSkuList(res.data.hotSkuList)
    IndexStore.setCartList(res.data.cartList)
  })
}

// 组件挂载后执行获取数据操作
onMounted(() => {
  getList()
})

// 定义显示规则弹窗的状态
const showRule = ref<boolean>(false)

// 打开规则弹窗的方法
const openRule = () => {
  showRule.value = true
}

// 跳转到秒杀页面的方法
const gotoSeckill = () => {
  uni.navigateTo({
    url: '/pagesSeckill/pagesSeckill',
  })
}

// 搜索操作的方法
const Search = () => {
  console.log(searchText.value)
}

// 跳转到商品详情页的方法
const GoHomeItem = (data: HotSku | SeckillSkuVo): void => {
  IndexStore.setProductDetails(data as HotSku)
  IndexStore.setSkuId(data._id)
  uni.navigateTo({
    url: '/pages/homeItem/homeItem',
  })
}

// 跳转到分类页的方法
const gotoCategory = (data: CategoryList, index: number) => {
  IndexStore.setCategoryId(data.id)
  IndexStore.setCategoryIndex(index)
  // 发布信息触发事件
  PubSub.publish('gotoCategory')
  uni.switchTab({
    url: '/pages/cate/index',
  })
}

const redirect = () => {
  uni.redirectTo({ url: '/pagesLocation/myPickUpLocation/myPickUpLocation' })
}
</script>

<style lang="less">
.container {
  width: 100vw;
  height: 100vh;
}

.gui-search .button {
  background-color: red !important;
}

.newPerson {
  width: 100%;
  height: 420rpx;
}

.categoryList {
  margin-left: 20rpx;
}

.seckillSkuVoList {
  display: flex;
  margin-left: 20rpx;
  margin-right: 20rpx;
  background-color: white;
  height: 400rpx;
  width: 710rpx;
}

.newPerson-list {
  display: flex;
  height: 340rpx;
}

.HotItem {
  width: 710rpx;
  height: 270rpx;
}
</style>
